<template>
  <div>
  
    <div ref="toolbar" id="div1" class="toolbar">
    </div>
    <div style="padding: 5px 0; color: #ccc"></div>
    <div ref="editor" class="text"> <!--可使用 min-height 实现编辑区域自动增加高度-->
        <p>请输入内容</p>
    </div>
  </div>
</template>

<script>
import E from "wangeditor";
export default {
  name: "editor",
  data() {
    return {
      editor: null,
      editorContent: "",
      value: ''
    };
  },
  props: {
    // value: {
    //       type: String,
    //       default: () => ''
    //  },
    uploadurl: {
        type: String,
        default: () => ''
    },
    uploadheader: {
        type: Object,
        default: () => {}
    },
    uploadparams: {
        type: Object,
        default: () => {}
    },
    disable: {
        type: Boolean,
        default: () => false
    },
    domain: {
        type: String,
        default: () => "http://127.0.0.1:8080/"
    }
  },
  methods: {
    getContent: function() {
      alert(this.editorContent);
    }
  },
  mounted() {
    let _this = this
    this.editor = new E(this.$refs.toolbar, this.$refs.editor);
    this.editor.customConfig.onchange = html => {
    //   this.editorContent = html;
      this.value = html
      this.$emit('input', html)
    };
       // 关闭粘贴样式的过滤
    this.editor.customConfig.pasteFilterStyle = false
    // 忽略粘贴内容中的图片
    this.editor.customConfig.pasteIgnoreImg = true
    // 自定义处理粘贴的文本内容
    this.editor.customConfig.fontNames = [
        '宋体',
        '微软雅黑',
        'Arial',
        'Tahoma',
        'Verdana',
        '仿宋'
    ],
    // this.editor.customConfig.uploadImgShowBase64 = true
    // 图片上传
    this.editor.customConfig.uploadImgServer = this.uploadurl
    this.editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024
    this.editor.customConfig.uploadImgMaxLength = 1
    this.editor.customConfig.uploadFileName = 'file'
    this.editor.customConfig.uploadImgHeaders = this.uploadheader
    this.editor.customConfig.uploadImgParams = this.uploadparams
    this.editor.customConfig.uploadImgTimeout = 3000
    this.editor.customConfig.uploadImgHooks = {
        customInsert: function (insertImg, result, editor) {
            let url = _this.domain+result.jdata
            insertImg(url)
        }
    }
 
    this.editor.create();
    this.editor.$textElem.attr('contenteditable', !this.disable)

  }
};
</script>

<style scoped>

 .toolbar {
            border: 1px solid #ccc;
        }
        .text {
            border: 1px solid #ccc;
            height: 30rem;
        }
</style>